<template>
  <div ref="main" style="width: 100%; height: 100%"></div>
</template>

<script setup>
import { ref, onMounted } from "vue";
import * as echarts from "echarts";

// 使用ref创建虚拟DOM引用，使用时用main.value
const main = ref()
onMounted(
  () => {
    init()
  }
)
function init() {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(main.value)
  // 指定图表的配置项和数据
  const option = {
    title: {
      text: 'Skills',
    },
    radar: {
      indicator: [
        { name: 'Javascript', max: 10000, },
        { name: 'CSS', max: 10000 },
        { name: 'Vue', max: 10000 },
        { name: 'React', max: 10000 },
        { name: 'Axios', max: 10000 },
        { name: 'WXApp', max: 10000 }
      ],
      axisName: {
        color: '#fff',
        backgroundColor: '#666',
        borderRadius: 3,
        padding: [3, 5]
      },
      splitArea: {
        areaStyle: {
          color: ['#77EADF', '#428BD4', '#64AFE9', '#26C3BE'],
          shadowColor: 'rgba(0, 0, 0, 0.2)',
          shadowBlur: 10
        }
      },
    },
    series: [
      {
        name: 'Budget vs spending',
        type: 'radar',
        color: '#ff0000',
        data: [
          {
            value: [7500, 9000, 7700, 6700, 8000, 7200],
            name: '语言基础',
            areaStyle: {
              color: new echarts.graphic.RadialGradient(0.1, 0.1, 1, [
                {
                  color: 'rgba(255, 145, 124, 0.1)',
                  offset: 0
                },
                {
                  color: 'rgba(255, 145, 124, 0.9)',
                  offset: 1
                }
              ])
            }
          },
        ]
      }
    ]
  }
  myChart.setOption(option);
}
</script>

